<template>
  <div id="per_add">
    <div id="search_box">
      <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
      <el-button type="submit" icon="el-icon-plus" @click="refresh_data">刷新</el-button>
    </div>
    <div id="table_box">
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          prop="schoolName"
          label="学校名称">
        </el-table-column>
        <el-table-column
          prop="aesKey"
          label="授权回调码">
        </el-table-column>
        <el-table-column
          prop="aesToken"
          label="授权token">
        </el-table-column>
        <el-table-column
          prop="appKey"
          label="学校ID">
        </el-table-column>
        <el-table-column
          prop="appSecret"
          label="学校密钥">
        </el-table-column>
        <el-table-column
          prop="zuZhiId"
          label="组织代码">
        </el-table-column>
      </el-table>
    </div>
    <div id="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page_params.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page_params.size"
        layout="total, sizes, prev, pager, next"
        :total="page_params.total">
      </el-pagination>
    </div>
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="学校名称" prop="schoolName">
          <el-input v-model="ruleForm.schoolName" placeholder="请输入学校名称"></el-input>
        </el-form-item>
        <el-form-item label="学校ID" prop="appKey">
          <el-input v-model="ruleForm.appKey" placeholder="请输入学校ID"></el-input>
        </el-form-item>
        <el-form-item label="学校密钥" prop="appSecret">
          <el-input v-model="ruleForm.appSecret" placeholder="请输入学校密钥"></el-input>
        </el-form-item>
        <el-form-item label="授权回调码" prop="aesKey">
          <el-input v-model="ruleForm.aesKey" placeholder="请输入授权回调码"></el-input>
        </el-form-item>
        <el-form-item label="授权token" prop="aesToken">
          <el-input v-model="ruleForm.aesToken" placeholder="请输入授权token"></el-input>
        </el-form-item>
        <el-form-item label="组织代码" prop="organizationNumber">
          <el-input v-model="ruleForm.zuZhiId" placeholder="请输入组织代码"></el-input>
        </el-form-item>
        <el-form-item/>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
    import {add, list} from '@/api/per';
    export default {
        data() {
            return {
                page_params: {
                    current: 1,
                    size: 10,
                    total: 100
                },
                tableData: [],
                dialogVisible: false,
                ruleForm: {},
                rules: {
                    schoolName: [
                        { required: true, message: '请输入学校名称', trigger: 'blur' }
                    ],
                    aesKey: [
                        { required: true, message: '请输入授权回调码', trigger: 'blur' }
                    ],
                    aesToken: [
                        { required: true, message: '请输入授权token', trigger: 'blur' }
                    ],
                    appKey: [
                        { required: true, message: '企业应用ID', trigger: 'blur' }
                    ],
                    appSecret: [
                        { required: true, message: '请输入企业应用密钥', trigger: 'blur' }
                    ],
                    zuZhiId: [
                        { required: true, message: '请输入企业组织代码', trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            handleSizeChange(val) {
              this.page_params.current = 1
              this.page_params.size = val
              this.refresh_data()
            },
            handleCurrentChange(val) {
              this.page_params.current = val
              this.refresh_data()
            },
            refresh_data(){
                this.loading = true;
                list(this.page_params).then((res) => {
                    if (res.code != "200") {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }else{
                        this.tableData = res.data.records;
                        this.page_params.total = res.data.total;
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },
            add(){
                this.ruleForm = {
                    schoolName: "",
                    loginAppId: "",
                    loginAppSecret: "",
                    appKey: "",
                    appSecret: "",
                    aesToken: "",
                    aesKey: "",
                    zuZhiId: ""
                };
                this.dialogVisible = true;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.ruleForm.loginAppId = this.ruleForm.appKey;
                        this.ruleForm.loginAppSecret = this.ruleForm.appSecret ;
                        add(this.ruleForm).then((res) => {
                            if (res.code != "200") {
                                this.$message({
                                    message: res.msg,
                                    type: 'warning'
                                });
                            }else{
                                this.dialogVisible = false;
                                this.refresh_data();
                            }
                        }).catch(() => {

                        })
                    } else {
                        return false;
                    }
                });
            },
        },
        created(){
            this.refresh_data();
        }
    }
</script>
<style lang="scss">
  #per_add {
    #search_box {
      margin: 10px 20px 10px 20px;
    }
    #table_box {
      margin: 10px 20px 10px 20px;
    }
    #page_box {
      text-align: center;
    }
  }
</style>
